<template>
  <div id="mapEcharts">
    <!--<VEcharts  autoresize
                   :options="opts"
                   @click="aaa"
        ></VEcharts>-->
    <div class="map-imgs">
      <VEcharts
        autoresize
        :options="opts"
        style="width: 100%; height: 100%"
        @click="townClick"
      />
    </div>
    <!--        <canvas id="myCanvas" width="200" height="100"  style=" width: 100%;height: 100%;" ref="myCanvas"></canvas>-->
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
// 深度克隆
function cloneUtil(target) {
  // 判断目标数据是对象还是数组
  // [object Array]  [object Object]  [object Function]
  const type = Object.prototype.toString.call(target);
  let res;
  if (type.includes('Array')) {
    res = [];
  } else if (type.includes('Object')) {
    res = {};
  } else {
    return '';
  }
  for (const i in target) {
    if (typeof target[i] === 'object') {
      res[i] = cloneUtil(target[i]);
    } else {
      res[i] = target[i];
    }
  }

  return res;
}
// const Data = {
//   '齐贤': [120.49476, 30.08189],
//   '马鞍': [120.589607, 30.14575]
//   // '安昌':[]
// };
export default {
  name: 'MapEcharts',
  components: {
    VEcharts
  },
  props: {
    myStyle: {
      type: Number,
      default: 1
    },
    orGanize: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    realOrGanize() {
      // let newArr = [];
      // for (let item of this.OrGanize) {
      //     let obj = {
      //         'name': item.shortName,
      //         'value': getRandomNum(10000, 100000),
      //         'data': item
      //     };
      //     newArr.push(obj);
      // }

      const aaa = {
        finishTime: '2020-09-28',
        year: '2020',
        rateMoney: 100,
        enterPriseName: '沃洲镇',
        ROW_ID: 1,
        enterPriseCode: '018081',
        checkStatus: 0,
        money: '350,000.00',
        proGramId: 2865,
        noticeStatus: 0,
        startTime: '2020-09-28',
        proGramGroupId: 593,
        proGramGroupName: '业务管理经费',
        pMoney: '350,000.00',
        shortName: '齐贤街道'
      };
      const newArr = [
        {
          name: '齐贤',
          value: 55555,
          data: {
            ...aaa
          }
        },
        {
          name: '柯桥区',
          value: 6666,
          data: {
            ...aaa
          }
        }
      ];
      return newArr;
    },
    mapbg0() {
      if (this.myStyle === 1) {
        return '#1fd2ff';
      } else if (this.myStyle === 2) {
        return '#1fd2ff';
      }
      return false;
    },
    mapbg1() {
      if (this.myStyle === 1) {
        return '#263238';
      } else if (this.myStyle === 2) {
        return '#1570ac';
      }
      return false;
    },
    mapFontbg() {
      if (this.myStyle === 1) {
        return 'white';
      } else if (this.myStyle === 2) {
        return '#00e3f9';
      }
      return false;
    },
    mapActiveItembg() {
      if (this.myStyle === 1) {
        return '#3499f9';
      } else if (this.myStyle === 2) {
        return '#004073';
      }
      return false;
    },
    opts() {
      const _this = this;
      const baseMap = {
        name: '柯桥',
        type: 'map',
        mapType: 'keqiao',
        roam: 'true', // 拖拽
        aspectScale: 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
        zoom: 1.1, // 地图大小
        itemStyle: {
          // 地图样式
          normal: {
            borderColor: '#26323869',
            borderWidth: 1,
            areaColor: '#88C2F9',
            shadowColor: 'rgba(0, 0, 238,.02)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5
          }
        },

        emphasis: {
          // 鼠标移入动态的时候显示的默认样式
          itemStyle: {
            borderColor: '#26323869',
            borderWidth: 1,
            areaColor: '#88C2F9',
            shadowColor: 'rgba(0, 0, 238,.02)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5
          }
        },
        showLegendSymbol: false, // 省份对应位子的红点
        label: {
          show: false,
          offset: [120, 40],
          // 'normal': {
          //     'show': true,
          //     // 'color': _this.mapFontbg,
          //     'color': '#D9E9EA',
          //     'fontWeight': 600,
          //     'fontSize': 28,
          //     'formatter': '{b}'
          // },
          emphasis: {
            show: false,
            color: _this.mapFontbg,
            fontSize: 28,
            fontWeight: 300,
            formatter: '{b}'
          }
        },
        layoutCenter: ['49%', '48%'],
        layoutSize: '108%',
        // geoIndex: 0,
        data: [{ name: '前线', value: 1 }],

        silent: true // 鼠标悬浮事件禁用
        // data: _this.realOrGanize
      };

      const map1 = cloneUtil(baseMap);
      const map2 = cloneUtil(baseMap);
      const map3 = cloneUtil(baseMap);
      const map4 = cloneUtil(baseMap);
      const map5 = cloneUtil(baseMap);
      const map6 = cloneUtil(baseMap);
      const map7 = cloneUtil(baseMap);
      const map8 = cloneUtil(baseMap);
      const map9 = cloneUtil(baseMap);
      const map10 = cloneUtil(baseMap);

      map2.mapType = 'keqiao1';
      map3.mapType = 'keqiao2';
      map4.mapType = 'keqiao3';
      map5.mapType = 'keqiao4';
      map6.mapType = 'keqiao5';
      map7.mapType = 'keqiao6';
      map8.mapType = 'keqiao7';
      map9.mapType = 'keqiao8';
      map10.mapType = 'keqiao9';

      map2['layoutCenter'] = ['49%', '47.9%'];
      map3['layoutCenter'] = ['49%', '47.8%'];
      map4['layoutCenter'] = ['49%', '47.7%'];
      map5['layoutCenter'] = ['49%', '47.6%'];
      map6['layoutCenter'] = ['49%', '47.5%'];
      map7['layoutCenter'] = ['49%', '47.4%'];
      map8['layoutCenter'] = ['49%', '47.3%'];
      map9['layoutCenter'] = ['49%', '47.2%'];
      map10['layoutCenter'] = ['49%', '47.1%'];

      map1.itemStyle.normal = {
        itemStyle: {
          areaColor: _this.mapActiveItembg,
          borderColor: '#0A0131',
          borderWidth: 0.3,
          shadowColor: 'rgba(0, 0, 0, .6)',
          shadowBlur: 5,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      };
      return {
        tooltip: {
          formatter: '{b}'
        },
        legend: {
          show: false
        },
        visualMap: {
          show: false,
          min: 60,
          max: 666,
          left: '60%',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false,
          color: [_this.mapbg0, _this.mapbg1, '#1fd2ff']
          // color: [_this.mapbg0, _this.mapbg1, "red"] // '#0b50b9','#1570ac'
          // 'pieces':[{lte:'齐贤镇',label:'齐贤镇'}],
          // 'inRange':['red']
        },
        // 'dataRange': {
        //   'x': 'left',
        //   'y': 'bottom',
        //   'splitList': [
        //     { start: 55555, end: 55556 },
        //     { start: 0, end: 55554 }
        //   ],
        //   'color': ['#4169e1', '#88C2F9']
        // },
        selectedMode: 'single',
        // geo: { // 地图配置
        //   show: true,
        //   map: 'keqiao4',
        //   label: {
        //     normal: { show: false },
        //     emphasis: { show: false }
        //   },
        //   roam: false,
        //   itemStyle: {
        //     normal: {
        //       // areaColor: 'red',
        //       borderColor: '#3B5077'
        //     },
        //     emphasis: { areaColor: '#2B91B7' }
        //   },
        //   layoutCenter: ['49%', '47.1%'],
        //   layoutSize: '95%',
        //   zoom: 1.1,
        //   aspectScale: 1.5
        // },
        series: [
          // { // 散点配置
          //   name: '数量',
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   data: [{ name: '齐贤', value: [120.546075, 30.155038, 90] }],
          //   symbolSize: function(val) {
          //     return val[2];
          //   },
          //   showEffectOn: 'emphasis',
          //   rippleEffect: { brushType: 'stroke' },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'inner',
          //       show: true,
          //       color:'#fff'
          //     },
          //     emphasis: { show: true }
          //   },
          //   symbol:`image://${require("@/assets/img/homwAnalyse/橙色预警-箭头中间.png")}`,
          //   itemStyle: {
          //     normal: { color: '#ff8003' }
          //   }
          // },
          map1,
          map2,
          map3,
          map4,
          map5,
          map6,
          map7,
          map8,
          map9,
          map10,
          {
            name: '齐贤街道',
            type: 'map',
            // type: 'custom',
            // coordinateSystem: 'geo',
            geoIndex: 1,
            mapType: 'keqiaozi',
            roam: 'true', // 拖拽
            aspectScale: 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
            zoom: 1.1, // 地图大小
            itemStyle: {
              // 地图样式
              normal: {
                borderColor: 'rgba(0,0,0,0.20)',
                borderWidth: 2,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1fd2ff' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1fd2ff' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(128, 217, 248, 1)',
                boxShadow: '9px 9px 25px 0px rgba(0,0,0,0.20)'
                // shadowColor: "#0169d4",
                // shadowOffsetX: -2,
                // shadowOffsetY: 2,
                // shadowBlur: 20
              }
            },
            emphasis: {
              // 鼠标移入动态的时候显示的默认样式
              itemStyle: {
                areaColor: _this.mapActiveItembg,
                borderColor: '#404a59',
                borderWidth: 0.1,
                shadowColor: 'rgba(0, 0, 0, .6)',
                shadowBlur: 5,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            showLegendSymbol: false, // 省份对应位子的红点
            label: {
              normal: {
                show: true,
                // 'color': _this.mapFontbg,
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
                // 'formatter': '{b}',
                formatter: '{b}'
              },
              emphasis: {
                show: true,
                color: '#fff',
                // 'color': _this.mapFontbg,
                fontSize: 22,
                fontWeight: 600,
                formatter: '{b}'
              }
            },
            grid: {},
            layoutCenter: ['49%', '47.0%'],
            layoutSize: '108%',
            data: _this.realOrGanize

            // data: [{ name: '齐贤', value: 1 }]
          }
        ]
      };
    }
  },
  methods: {
    townClick(e) {
      this.$emit('into-town', e);
    }
  }
};
</script>

<style scoped>
#mapEcharts {
  width: 100%;
  height: 100%;
  position: relative;
  top: 1rem;
}
.map-imgs {
  height: 100%;
  position: relative;
}

.map-imgs > img {
  width: 9rem;
  height: 9rem;
}
.jinglingzhen {
  position: absolute;
  bottom: 20%;
  left: 10%;
}
</style>
